<!-- eslint-disable no-undef -->
<!-- eslint-disable no-undef -->
<template>
  <div class="wrapper-page" id="wrapper-page-error">
    <Headers></Headers>
    <div class="container" id="bg3d"></div>
    <Loading v-if="progressStore.progress != 100" :progress="progressStore.progress"></Loading>
    <LeftPage v-show="isShowUI"></LeftPage>
    <RightPage v-show="isShowUI"></RightPage>
    <div style="position: absolute;
       right: 31vh;
    top: 13vh;
    width: 17vh;">
      <FloorPersonnelList v-show="isShowUI"></FloorPersonnelList>
    </div>
    <Footer></Footer>
    <div class="left-mask"></div>
    <div class="right-mask"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Headers from "@/components/Headers.vue";
import Loading from "@/components/Loading.vue";
import Footer from "@/components/Footer.vue";
import LeftPage from "@/components/LeftPage.vue";
import RightPage from "@/components/RightPage.vue";
import { useProgressStore } from "@/stores/progress";
const progressStore = useProgressStore();
const isShowUI = ref(true)
onMounted(() => {
  progressStore.increment(100);

  THREEX.observer.on("HIDE_UI",(bool)=>{
    isShowUI.value = bool;
  })
});
</script>

<style scoped>
.left-mask{
  height: 100%;
  width: 1vh;
  background: url("@/assets/layer/left-mask.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
}
.right-mask{
  height: 100%;
  width: 1vh;
  background: url("@/assets/layer/right-mask.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11;
}


.container {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.click-top {
  position: absolute;
  right: 0px;
  padding: 10px;
  top: 58px;
}

.click-top-button {
  background: #4CAF50;
  color: #fff;
  font-size: 12px;
  padding: 4px 5px;
  border-radius: 8px;
  margin: 5px;
  cursor: pointer;
  text-align: center;
}

.telephone {
  position: absolute;
  height: 36px;
  width: 36px;
  background-size: 100% 100%;
  right: 20%;
  bottom: 2.85vw;
  cursor: pointer;
}

.wrapper-page {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  .title {
    position: absolute;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-size: 100%;
    color: #fff;
    left: 0;
    top: 0;
  }
  

  .menu-list {
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    text-align: center;

    .list {
      display: inline-block;
    }
  }

  .menu-list .item {
    display: inline-block;
    width: 138px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-right: 20px;
    background: #00ffff;
    color: #fff;
    display: inline-block;
    background-size: 100%;
    cursor: pointer;
  }

  .left-panel {
    position: absolute;
    width: 350px;
    left: 150px;
    top: 200px;

    .echart-line {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      width: 350px;
      height: 200px;
      margin-bottom: 25px;
    }
  }

  .right-panel {
    position: absolute;
    width: 350px;
    right: 150px;
    top: 200px;

    .echart-line {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      width: 350px;
      height: 200px;
      margin-bottom: 25px;
    }
  }
}

.wrapper-page::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
  background: url("@/assets/layer/mask.png") no-repeat;
  background-size: 100% 100%;
  left: 0;
  top: 0;
}

h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {

  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
